<template>
  <view class="controlCheck-container">
    <u-navbar placeholder autoBack>
      <view slot="center" style="width: 80vw">
        <TopBar class="tab-bar" :tabBars="tabBars" :tabIndex="tabIndex" @change="onTabChange" backgroundColor="#fff" />
      </view>
    </u-navbar>

    <component ref="comp" v-bind:is="currentTabComponent" />
  </view>
</template>

<script>
import TopBar from '@/components/top-bar/index.vue'
import recordItem from './recordItem.vue'
import UNavbar from '@/uni_modules/uview-ui/components/u-navbar/u-navbar.vue'

export default {
  components: {
    UNavbar,
    TopBar,
    recordItem
  },
  computed: {
    currentTabComponent() {
      return this.tabBars.find((item) => item.index === this.tabIndex).componentName
    }
  },

  data() {
    return {
      tabBars: [
        {
          name: '线上考试记录',
          componentName: 'recordItem',
          index: 0
        },
        {
          name: '线下考试记录',
          componentName: 'recordItem',
          index: 1
        }
      ],
      tabIndex: 0
    }
  },
  onShow() {
    if (this.$refs.comp) {
      this.$refs.comp.initData(this.tabIndex)
    }
  },
  onReachBottom() {
    this.$refs.comp.onfreshBottom(this.tabIndex)
  },
  onPullDownRefresh() {
    this.$refs.comp.initData(this.tabIndex)
  },
  mounted() {
    this.$refs.comp.initData(0)
  },
  methods: {
    onTabChange(obj) {
      if (this.tabIndex === obj.index) {
        return
      }
      this.tabIndex = obj.index
      this.$refs.comp.initData(this.tabIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-bar {
  ::v-deep .top-bar-item {
    font-size: 16px;
    color: #999999;
    font-weight: normal;
  }

  ::v-deep .top-bar-item.active {
    font-weight: bold;
    color: #454a5e;
  }
}
</style>
